<template>
	<view class="pageBg">
		<HM-dragSorts :list="list" :isLongTouch="false" :isAutoScroll="true" :feedbackGeneratorState="true"  :rowHeight="60" @change="change" @confirm="confirm" @onclick="onclick" >
			<template slot="rowContent" slot-scope="{ row, index }">
				<view class="row flex_r_sb_c">
					<view class="rowLeft flex_r_fs_c">
						<text v-if="row.status===1" :class="['iconfont', 'iconwarning', 'f_48', 'margin_r24', 'level_' + row.level]"></text>
						<text v-else class="iconfont iconwarning f_48 tc_9 margin_r24" @click.stop="deleteTodo(index)"></text>
						<text class="f_28 fw_500" :class="[row.status===2?'td_line tc_9':'tc_3']">{{row.content}}</text>
					</view>
					<view class="rowRight">
						<!-- <text class="iconfont icondelete f_40 tc_d"></text> -->
					</view>
				</view>
			</template>
		</HM-dragSorts>
		<fr-custom-pop :show.sync="popVisible" :options="popOptions" class="popBox" @popConfirm="popConfirm">
			<!-- #ifdef MP-WEIXIN -->
			<view class="cnt flex_c_fs_fs" slot="slotCnt">
				<view class="levelList w100 margin_b40 flex_r_sa_c">
					<block v-for="(item, index) in levelList" :key="item.level">
						<view class="flex_c_c_c">
							<text :class="['iconfont iconwarning', 'f_60', 'fw_500', 'margin_b16', todoData.level===item.level?'level_' + item.level:'tc_8']" @click.stop="selectLevel(item)"></text>
							<text :class="['f_24', 'fw_400', todoData.level===item.level?'tc_d':'tc_8']">{{item.name}}</text>
						</view>
					</block>
				</view>
				<view class="inputItem w100">
					<uni-easyinput type="textarea" v-model="todoData.todo" :clearable="false" :inputBorder="true" :styles="{color:'#DDD', borderColor:'#888'}" :placeholderStyle="'color:#555'" placeholder="请输入事项" @blur="inputOnBlur"></uni-easyinput>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<template v-slot:default="options">
				<view class="cnt flex_c_fs_fs" slot="slotCnt">
					<view class="levelList w100 margin_b40 flex_r_sa_c">
						<block v-for="(item, index) in levelList" :key="item.level">
							<view class="flex_c_c_c">
								<text :class="['iconfont iconwarning', 'f_60', 'fw_500', 'margin_b16', todoData.level===item.level?'level_' + item.level:'tc_8']" @click.stop="selectLevel(item)"></text>
								<text :class="['f_24', 'fw_400', todoData.level===item.level?'tc_d':'tc_8']">{{item.name}}</text>
							</view>
						</block>
					</view>
					<view class="inputItem w100">
						<uni-easyinput type="textarea" v-model="todoData.todo" :clearable="false" :inputBorder="true" :styles="{color:'#DDD', borderColor:'#888'}" :placeholderStyle="'color:#555'" placeholder="请输入事项" @blur="inputOnBlur"></uni-easyinput>
					</view>
				</view>
			</template>
			<!-- #endif -->
		</fr-custom-pop>
		<fr-drag-btn
			v-show="!popVisible"
			:isDock="true"
		    :existTabBar="true"
			:btnText="'新增'"
			:btnBg="'#06B4FD'"
			:edge="10"
			:bottom="380"
		    @btnClick="dragBtnClick"
		    @btnTouchstart="dragBtnTouchstart"
		    @btnTouchend="dragBtnTouchend" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// level => 1--绿色, 一般事项; 2--黄色, 需要重视的事项; 3--红色, 嗷嗷紧急的事项
				// status => 1--未完成; 2--已完成
				list: [
					// {
					// 	id: 1,
					// 	content: '这是一条TODO数据!',
					// 	level: 1,
					// 	status: 2,
					// },
				],
				levelList: [
					{name: '一般事项', level: 1, desc: '可有可无的事项'},
					{name: '重要事项', level: 2, desc: '这事挺重要的啦'},
					{name: '紧急事项', level: 3, desc: '嗷嗷紧急的事项'},
				],
				todoData: {
					level: 1,
					todo: ''
				},
				popVisible: false,
				popOptions: {
					showTitle: true,
					title: '新增事项',
					popW: 600,
				},
			};
		},
		onLoad() {
			uni.getStorageSync('moon|todo')? this.list = uni.getStorageSync('moon|todo').data : null
		},
		onHide() {
			const data = {
				date: this.$tool.getDate('date'),
				data: this.list
			}
			data.data.length>0? uni.setStorageSync('moon|todo', data) : uni.removeStorageSync('moon|todo')
		},
		onUnload() {
			const data = {
				date: this.$tool.getDate('date'),
				data: this.list
			}
			data.data.length>0? uni.setStorageSync('moon|todo', data) : uni.removeStorageSync('moon|todo')
		},
		methods: {
			change(e) {},
			confirm(e) {
				let curRow = this.list[e.index]
				this.list.splice(e.index, 1)
				this.list.splice(e.moveTo, 0, curRow)
			},
			onclick(e) {
				this.list[e.index].status = this.list[e.index].status === 1? 2:1
			},
			dragBtnClick(e) {
				this.popVisible = true
			},
			dragBtnTouchstart(e) {},
			dragBtnTouchend(e) {},
			deleteTodo(i) {
				const _this = this
				uni.showModal({
					title: '注意',
					content: '是否删除该条TODO?',
					success(res) {
						if(res.confirm) {
							_this.list.splice(i, 1)
							_this.$tool.msg('删除成功!', 'success')
						}
					}
				})
			},
			selectLevel(e) {
				this.todoData.level = e.level
			},
			inputOnBlur(e) {},
			popConfirm() {
				let data = {
					id: this.$tool.uuid(),
					content: this.todoData.todo,
					level: this.todoData.level,
					status: 1,
				}
				this.list.push(data)
				this.todoData = {
					level: 1,
					todo: ''
				}
				this.popVisible = false
				this.$tool.msg('保存成功!', 'success')
			},
		},
	}
</script>

<style lang="scss">
page {
	background-color: #F8F8F8;
	height: 100%;
}
</style>
<style lang="scss" scoped>
.pageBg {
	.level_1 {
		color: #55AC6B;
	}
	.level_2 {
		color: #FAD431;
	}
	.level_3 {
		color: #D31F1F;
	}
	.rowContent {
		.row {
			.rowLeft {
				
			}
		}
	}
	.popBox {
		.cnt {
			padding: 28rpx;
			box-sizing: border-box;
			.levelList {
				padding: 0 28rpx;
				box-sizing: border-box;
			}
			.inputItem {
				padding: 0 28rpx;
				box-sizing: border-box;
			}
		}
	}
}
</style>
